<template>
  <div>
    <!-- 头部搜索框 -->
    <el-form :inline="true"
             :model="formInline"
             class="demo-form-inline headerForm">
      <el-form-item label="优惠券:">
        <el-input v-model="formInline.name"
                  placeholder="优惠券名称"></el-input>
      </el-form-item>
      <el-form-item label="日期:">
        <div class="block">
          <el-date-picker v-model="value6"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          @blur="log"></el-date-picker>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button size="small"
                   @click="inquireList">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button size="small"
                   @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 夹缝中求生的  新增按钮 -->
    <el-row :gutter="20"
            class="one_row">
      <el-col :span="6">
        <el-button class="xinzeng"
                   @click="addCouponButton = true">新增优惠券</el-button>
      </el-col>
      <el-col :span="4"
              :offset="7">
        <div class="grant_sum">发放总数量:{{totalNum}}张</div>
      </el-col>
      <el-col :span="4"
              :offset="1">
        <div class="get_totalMoney">领取总金额:{{totalMoney}}元</div>
      </el-col>
    </el-row>

    <!-- 主题内容区域 -->
    <el-table :data="tableData"
              border
              style="width: 100%">
      <el-table-column prop="coupon_id"
                       label="#"></el-table-column>
      <el-table-column prop="coupon_name"
                       label="优惠券名称"></el-table-column>
      <el-table-column prop="coupon_value"
                       width="140px"
                       label="优惠券金额/元"></el-table-column>
      <el-table-column prop="coupon_limit"
                       width="140px"
                       label="使用金额限制"></el-table-column>
      <el-table-column prop="coupon_timeLimit"
                       width="140px"
                       label="使用时限/天"></el-table-column>
      <el-table-column prop="coupon_howPieces"
                       width="140px"
                       label="领取限制/张"></el-table-column>
      <el-table-column prop
                       width="140px"
                       label="发放总数量/张">100</el-table-column>
      <el-table-column prop="coupon_num"
                       width="140px"
                       label="领取金额/元"></el-table-column>
      <el-table-column prop
                       width="145px"
                       label="操作">
        <template slot-scope="scope">
          <el-button size="mini"
                     @click="editDialog(scope.row)">编辑</el-button>
          <el-button size="mini"
                     type="danger"
                     class="deleteMargin"
                     @click="deleteCoupon(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <el-pagination layout="prev, pager, next"
                   :total="total"></el-pagination>

    <!-- 新增优惠券的弹框   对话框-->
    <el-dialog title="新增优惠券"
               :visible.sync="addCouponButton"
               :center="true">
      <el-form :model="newCouponForm">
        <el-form-item label="优惠券名称:"
                      :label-width="formLabelWidth"
                      class="newCouponFormItem">
          <el-input v-model="newCouponForm.coupon_name"
                    auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="优惠券金额(元):"
                      :label-width="formLabelWidth"
                      class="newCouponFormItem">
          <el-input v-model="newCouponForm.coupon_value"
                    auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="使用金额限制(元):"
                      :label-width="formLabelWidth"
                      class="newCouponFormItem">
          <el-input v-model="newCouponForm.coupon_limit"
                    auto-complete="off"
                    placeholder="不填写即为无使用金额限制"></el-input>
        </el-form-item>
        <el-form-item label="使用时限(天):"
                      :label-width="formLabelWidth"
                      class="newCouponFormItem">
          <el-input v-model="newCouponForm.coupon_timeLimit"
                    auto-complete="off"
                    placeholder="不填写即为无使用时限"></el-input>
        </el-form-item>
        <el-form-item label="帐号领取上限(张):"
                      :label-width="formLabelWidth"
                      class="newCouponFormItem">
          <el-input v-model="newCouponForm.coupon_howPieces"
                    auto-complete="off"
                    placeholder="不填写即不限制领取数量"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="addCouponButton = false"
                   class="aaa">取 消</el-button>
        <el-button type="primary"
                   @click="addCouponForm()"
                   class="aaa">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 编辑 -->
    <el-dialog title="编辑优惠券"
               :visible.sync="editCouponButton"
               :center="true">
      <el-form :model="editNewCouponForm">
        <el-form-item label="优惠券名称:"
                      :label-width="formLabelWidth"
                      class="newCouponFormItem">
          <el-input v-model="editNewCouponForm.coupon_name"
                    auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="优惠券金额(元):"
                      :label-width="formLabelWidth"
                      class="newCouponFormItem">
          <el-input v-model="editNewCouponForm.coupon_value"
                    auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="使用金额限制(元):"
                      :label-width="formLabelWidth"
                      class="newCouponFormItem">
          <el-input v-model="editNewCouponForm.coupon_limit"
                    auto-complete="off"
                    placeholder="不填写即为无使用金额限制"></el-input>
        </el-form-item>
        <el-form-item label="使用时限(天):"
                      :label-width="formLabelWidth"
                      class="newCouponFormItem">
          <el-input v-model="editNewCouponForm.coupon_timeLimit"
                    auto-complete="off"
                    placeholder="不填写即为无使用时限"></el-input>
        </el-form-item>
        <el-form-item label="帐号领取上限(张):"
                      :label-width="formLabelWidth"
                      class="newCouponFormItem">
          <el-input v-model="editNewCouponForm.coupon_howPieces"
                    auto-complete="off"
                    placeholder="不填写即不限制领取数量"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="editCouponButton = false"
                   class="aaa">取 消</el-button>
        <el-button type="primary"
                   @click="editCouponForm()"
                   class="aaa">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { setItem, getItem } from '@/utils/storage'
import '@/mock/mock-zp'
export default {
  data () {
    return {
      // 搜索内容
      formInline: {
        name: '',
        user: ''
      },

      // 日期时间段
      value6: '',

      // 表格数据
      tableData: [],

      // 分页器
      total: 1,

      // 总数量, 总金额
      totalNum: '1000',
      totalMoney: '',

      // 新增优惠券的 显示与隐藏
      addCouponButton: false,

      // 新增优惠券的  数据
      newCouponForm: {
        coupon_name: '黑马优惠券',
        coupon_value: '50.00',
        coupon_limit: '无',
        coupon_timeLimit: '30',
        coupon_howPieces: '无'
      },

      // 新增优惠券的 对话框
      formLabelWidth: '200px',

      // 新增优惠券的  操作数组
      addCouponArr: [],

      // 新增数据后的查询 bug 解决
      inquireCouponArr: [],

      // 编辑对话框的显示 隐藏
      editCouponButton: false,

      // 编辑 对话框 数据
      editNewCouponForm: {},

      // 编辑对话框的的 操作数组
      editCouponArr: [],

      // 编辑的 当前项的 索引值
      editIndex: '',

      // 删除按钮  操作数组
      deleteArr: [],

      // 删除数组的 索引值
      deleteIndex: ''
    }
  },
  created () {
    this.getComList()
  },
  methods: {
    // 这个log  是日期得到的数据   未处理
    log () {
      console.log(this.value6)
    },

    // 获取数据
    async getComList () {
      const { data: res } = await this.$http.get('/common')
      this.tableData = res.data
      setItem('comCoupon', this.tableData)
      var num = 0
      res.data.forEach((item) => {
        num += item.coupon_num.substr(0, item.coupon_num.length - 1) - 0
      })
      this.totalMoney = num
    },
    // 按需搜索并渲染对应的数据
    inquireList () {
      this.inquireCouponArr = getItem('comCoupon')
      this.tableData = this.inquireCouponArr
      if (this.formInline.name.length === 0) {
        this.tableData = this.inquireCouponArr
        return '0'
      }
      var arr = []
      this.tableData.forEach((item, index) => {
        if (this.formInline.name === item.coupon_name) {
          arr.push(item)
        }
      })
      this.tableData = arr
    },
    // 重置 搜索表单
    resetForm () {
      this.formInline.name = ''
      this.tableData = getItem('comCoupon')
    },
    // 新增数据  弹框  确认按钮
    addCouponForm () {
      this.addCouponArr = getItem('comCoupon')
      this.newCouponForm.coupon_id = this.addCouponArr.length - 0 + 1
      this.newCouponForm.coupon_num = this.addCouponArr[5].coupon_num
      this.addCouponArr.push(this.newCouponForm)
      console.log(this.addCouponArr)

      // 把新的数组设置到本地存储
      setItem('comCoupon', this.addCouponArr)

      // 刷新页面
      this.tableData = getItem('comCoupon')
      this.totalNum = this.tableData.length * 100

      // 逻辑完成关闭弹框
      this.addCouponButton = false
    },

    // 编辑按钮  编辑对应一条的数据
    editDialog (item) {
      this.editNewCouponForm = ''
      this.editIndex = item.coupon_id - 1
      this.editCouponButton = true
      this.editNewCouponForm = item
    },

    // 编辑表单的确定按钮
    editCouponForm () {
      this.editCouponArr = getItem('comCoupon')
      console.log(this.editCouponArr)
      console.log(this.editIndex)
      this.editCouponArr[this.editIndex] = this.editNewCouponForm
      console.log(this.editCouponArr)
      setItem('comCoupon', this.editCouponArr)
      this.editCouponArr = getItem('comCoupon')
      this.tableData = this.editCouponArr
      this.editCouponButton = false
    },

    // 删除按钮  删除对应的数据
    deleteCoupon (item) {
      this.deleteArr = getItem('comCoupon')
      this.deleteIndex = item.coupon_id - 1
      this.deleteArr.splice(this.deleteIndex, 1)
      setItem('comCoupon', this.deleteArr)
      this.deleteArr = getItem('comCoupon')
      this.tableData = this.deleteArr
    }
  }
}
</script>

<style lang="less" scoped>
.headerForm {
  // position: absolute;
  width: 96%;
  height: 60px;
  border: 1px solid #000;
  border-radius: 10px;
  > div {
    padding: 0 20px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
}

.xinzeng {
  padding: 0;
  margin-top: 15px;
  width: 100px;
  height: 25px;
  line-height: 25px;
  background: #169bd5;
  color: #000;
}

.grant_sum,
.get_totalMoney {
  height: 25px;
  line-height: 25px;
  margin-top: 15px;
  padding-top: 5px;
  font-size: 12px;
  text-align: center;
}

// .one_row {
//   border-bottom: 1px solid #000;
// }

.el-table {
  width: 100%;
  margin-top: 20px;
}

.el-pagination {
  display: inline-block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 30px;
}

/deep/.el-range-separator {
  width: 6% !important;
}

.newCouponFormItem {
  width: 70%;
}

.aaa {
  margin: 0 100px;
}

.deleteMargin {
  margin-left: 10px;
}
</style>
